  <template>
    <view class="flex gap-x-[18rpx] items-center relative">
      <view v-if="list.length > max"
        class="absolute right-[10rpx] bottom-[10rpx] bg-black/50 text-[#DEDDDC] text-xs py-[4rpx] px-[18rpx] z-100">
        {{
          list.length -
          max }}+</view>
      <wd-img width="218rpx" height="218rpx" :src="formatUrl(item)" mode="aspectFill" v-for="(item, index) in imageList"
        :key="index"></wd-img>
    </view>
  </template>

<script setup>
import { formatUrl } from "@/utils/format";

const props = defineProps({
  max: {
    type: Number,
    default: 3
  },
  list: {
    type: Array,
    required: true
  }
});


const imageList = computed(() => props.list.filter((item, index) => index < props.max));

</script>

<style lang="scss" scoped></style>
